<template>
  <div>
    <PageWrapper :contentFullHeight="true" :contentBackground="true">
      <BasicTable @register="registerTable">
        <!-- 提示 -->
        <template #tableTitle>
          {{ t('routes.project.projectReport.projectReport') }}
          <Tooltip :title="t('routes.project.projectReport.tip')">
            <Icon icon="ion:alert-circle-outline" color="orange" size="20" />
          </Tooltip>
        </template>
        <!-- 新建 -->
        <template #toolbar>
          <a-button
            v-auth="['projectManager:report:create']"
            type="primary"
            @click="handleCreate"
            >{{ t('common.create') }}</a-button
          >
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                icon: 'clarity:note-edit-line',
                color: 'warning',
                onClick: handleEdit.bind(null, record),
                auth: 'projectManager:report:update',
              },
              {
                icon: 'ant-design:upload-outlined',
                color: 'success',
                onClick: handleUpload.bind(null, record),
                auth: 'projectManager:report:upload',
              },
              {
                icon: 'ant-design:download-outlined',
                color: 'success',
                onClick: handleDownload.bind(null, record),
                auth: 'projectManager:report:download',
              },
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                popConfirm: {
                  title: t('routes.table.menuManagement.confirmDelete'),
                  confirm: handleDelete.bind(null, record),
                },
                auth: 'projectManager:report:delete',
              },
            ]"
          />
        </template>
      </BasicTable>
      <!-- 新建，修改弹窗 -->
      <projReportModal @register="registerModal" />
    </PageWrapper>
  </div>
</template>

<script setup lang="ts">
  import { Icon } from '/@/components/Icon';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { reportColumns, searchProjectReportFormSchema } from './tableData';
  import { Tooltip } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  import projReportModal from './projReportModal.vue';

  const { t } = useI18n();

  const handleCreate = async () => {
    openReportModal(true, { isUpdate: false });
  };

  const handleEdit = async (record: Recordable) => {
    console.log('编辑', record);
  };

  const handleUpload = async (record: Recordable) => {
    console.log('上传', record);
  };

  const handleDownload = async (record: Recordable) => {
    console.log('下载', record);
  };

  const [registerTable, { reload }] = useTable({
    rowKey: 'id',
    columns: reportColumns(),
    useSearchForm: true,
    showTableSetting: true,
    formConfig: {
      labelWidth: 120,
      schemas: searchProjectReportFormSchema,
      autoSubmitOnEnter: true,
    },
    bordered: true,
    canResize: false,
    actionColumn: {
      width: 150,
      title: t('common.action'),
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  const [registerModal, { openModal: openReportModal }] = useModal();
</script>

<style scoped></style>
